<template>
  <div id="body" class="el-scrollbar__wrap">
    <!-- 顶部标题 -->
    <div class="topTitle">
      <i class="el-icon-edit" style="margin-right: 10px"></i>快捷按钮
    </div>
    <!-- 顶部 -->
    <div class="top">
      <!-- 顶部内容(图) -->
      <div class="topContent">
        <div class="topImg">
          <a>
            <img src="../../../assets/imgs/home/tongxunlu.png" alt="" class="singleImg" @click="
              addressBookRouter(
                '/hiddenDirectory/addressBookDetail',
                'addressBookDetail'
              )
              " />
          </a>
          <a>
            <img src="../../../assets/imgs/home/qingjia.png" alt="" class="singleImg" @click="dialogVisible = true" />
          </a>
          <a>
            <img src="@/assets/imgs/home/baoxiao.png" alt="" class="singleImg" @click="baoxiaoDialog = true" />
          </a>
          <a v-for="(item, index) in project" :key="index" @click="flowableRouter(item.type)">
            <img :src="item.src" alt="" class="singleImg" />
          </a>
        </div>
      </div>
    </div>
    <el-dialog title="请选择" :visible.sync="dialogVisible" width="15%">
      <el-button type="text" size="small" @click="flowableRouter(0)">请假</el-button>
      <el-button type="text" size="small" @click="flowableRouter(1)">调休</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogVisible = false" plain>关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="请选择" :visible.sync="baoxiaoDialog" width="20%">
      <el-button type="text" size="small" @click="baoxiaos(5)">差旅报销</el-button>
      <el-button type="text" size="small" @click="baoxiaos(6)">非差旅报销</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="baoxiaoDialog = false" plain>关闭</el-button>
      </span>
    </el-dialog>
    <!-- 中间 -->
    <div>
      <!-- 中间标题 -->
      <div class="middleTitle" style="display: flex">
        <div style="flex: 1">
          <i class="el-icon-menu" style="margin-right: 10px"></i>流程中心
        </div>
        <div style="width: 35%">
          <i class="el-icon-s-order" style="margin-right: 10px"></i>日历
        </div>
      </div>

      <!-- 中间内容 -->
      <div style="display: flex">
        <!-- 左边流程 -->
        <div class="left" style="flex: 1">
          <el-tabs v-model="middleTopClickNum" @tab-click="middleTopHandleClick"
            style="width: 100%; height: 420px; padding: 0px 5px">
            <!-- 待办事宜 -->
            <!-- <el-tab-pane label="待办事宜">
                <el-tabs
                  :tab-position="tabPosition"
                  v-model="backlog"
                  @tab-click="backlogHandleClick"
                  style="height: 360px; width: 100%"
                >
                  <el-tab-pane label="请假">
                    <el-table 
                    :cell-style="cellStyle" size="mini"
                    :header-cell-style="headerCellStyle"
                    :data="askForLeaveBacklog" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="agencySkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="task.createTime" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          {{scope.row.task.createTime | formatDate}}
                         </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="100"></el-table-column>
                      <el-table-column label="操作" prop="" fixed="right" show-overflow-tooltip  width="100">
                         
                        <template slot-scope="scope">
                            <el-button type="text" @click="adopt(scope.row)" size="mini" icon="el-icon-edit">审批 </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="外出">
                    <el-table  size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="goOutBacklog" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="agencySkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="task.createTime" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          {{scope.row.task.createTime | formatDate}}
                         </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="100"></el-table-column>
                      <el-table-column label="操作" prop="" fixed="right" show-overflow-tooltip  width="100">
                         
                        <template>
                            <el-button type="primary" size="mini" icon="el-icon-edit">审批 </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="出差">
                      <el-table  size="mini"
                      :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="businessTravelBacklog" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="agencySkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="task.createTime" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          {{scope.row.task.createTime | formatDate}}
                         </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="100"></el-table-column>
                      <el-table-column label="操作" prop="" fixed="right" show-overflow-tooltip  width="100">
                         
                        <template>
                            <el-button type="primary" size="mini" icon="el-icon-edit">审批 </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="加班">
                    <el-table  size="mini"
                     :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="workOvertimeBacklog" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="agencySkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="task.createTime" show-overflow-tooltip  min-width="100">
                         <template slot-scope="scope">
                          {{scope.row.task.createTime | formatDate}}
                         </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="100"></el-table-column>
                      <el-table-column label="操作" prop="" fixed="right" show-overflow-tooltip  width="100">
                         
                        <template slot-scope="scope">
                            <el-button type="text" @click="adopt(scope.row)" size="mini" icon="el-icon-edit">审批 </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="报销">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="recoverableBacklog" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="agencySkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="task.createTime" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          {{scope.row.task.createTime | formatDate}}
                         </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="100"></el-table-column>
                      <el-table-column label="操作" prop="" fixed="right" show-overflow-tooltip  width="100">
                         
                        <template>
                            <el-button type="primary" size="mini" icon="el-icon-edit">审批 </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="离职">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="leaveOfficeBacklog" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="agencySkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="task.createTime" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          {{scope.row.task.createTime | formatDate}}
                         </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="100"></el-table-column>
                      <el-table-column label="操作" prop="" fixed="right" show-overflow-tooltip  width="100">
                         
                        <template>
                            <el-button type="primary" size="mini" icon="el-icon-edit">审批 </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane> -->
            <!-- 已办事宜 -->
            <!-- <el-tab-pane label="已办事宜">
                <el-tabs
                  :tab-position="tabPosition"
                  v-model="finishedThings"
                  @tab-click="finishedHandleClick"
                  style="height: 360px; width: 100%"
                >
                  <el-tab-pane label="请假">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="askForLeaveFinished" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="finishedSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="完成时间" prop="endTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.endTime | formatDate}}
                         </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="外出">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="goOutFinished" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="finishedSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="完成时间" prop="endTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.endTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="出差">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="businessTravelFinished" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="finishedSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="完成时间" prop="endTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.endTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="加班">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="workOvertimeFinished" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="finishedSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="完成时间" prop="endTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.endTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="报销">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="recoverableFinished" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="finishedSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="完成时间" prop="endTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.endTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="离职">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="leaveOfficeFinished" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="finishedSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="完成时间" prop="endTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.endTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane> -->
            <!-- 审批退回 -->
            <!-- <el-tab-pane label="审批退回">
                <el-tabs
                  :tab-position="tabPosition"
                  v-model="reject"
                  @tab-click="rejectHandleClick"
                  style="height: 360px; width: 100%"
                >
                  <el-tab-pane label="请假">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="askForLeaveReject" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="returnSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="startTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.startTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="外出">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="goOutReject" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="returnSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="startTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.startTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="出差">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="businessTravelReject" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="returnSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="startTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.startTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="加班">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="workOvertimeReject" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="returnSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="startTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.startTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="报销">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="recoverableReject" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="returnSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="startTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.startTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="离职">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="leaveOfficeReject" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="vars.userName" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="returnSkipDetail(scope.row)">{{scope.row.vars.userName}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="创建时间" prop="startTime" show-overflow-tooltip  min-width="160">
                        <template slot-scope="scope">
                          {{scope.row.startTime | formatDate}}
                         </template></el-table-column>
                      <el-table-column label="流程名称" prop="vars.title" show-overflow-tooltip  min-width="330"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane> -->
            <!-- 抄送给我 -->
            <!-- <el-tab-pane label="抄送给我">
                <el-tabs
                  :tab-position="tabPosition"
                  v-model="copyGiveMe"
                  @tab-click="copyGiveMeHandleClick"
                  style="height: 360px; width: 100%"
                >
                  <el-tab-pane label="请假">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="askForLeaveCopyGiveMe" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="applyuser.name" show-overflow-tooltip  min-width="110">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="copySkipDetail(scope.row)">{{scope.row.applyuser.name}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="procInsName" show-overflow-tooltip  min-width="180"></el-table-column>
                      //<el-table-column label="申请时间" prop="applytime" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="请假类型" prop="leavetype" show-overflow-tooltip  min-width="100">
                        <template slot-scope="scope">
                              {{ $dictUtils.getDictLabel("processnote", scope.row.leavetype, '-') }}
                        </template>
                      </el-table-column>
                      <el-table-column label="开始时间" prop="startdate" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="结束时间" prop="startdate" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="时长" prop="longtime" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="请假事由" prop="content" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="驳回原因" prop="" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="审批时间" prop="" show-overflow-tooltip  min-width="180"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="外出">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="goOutCopyGiveMe" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="applyuser.name" show-overflow-tooltip  min-width="110">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="copySkipDetail(scope.row)">{{scope.row.applyuser.name}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="procInsName" show-overflow-tooltip  min-width="180"></el-table-column>
                      <el-table-column label="开始时间" prop="startdate" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="结束时间" prop="enddate" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="外出地点" prop="place" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="时长" prop="longtime" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="外出事由" prop="content" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="驳回原因" prop="" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="审批时间" prop="" show-overflow-tooltip  min-width="180"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="出差">
                      <el-table size="mini"
                      :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="businessTravelCopyGiveMe" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="applyuser.name" show-overflow-tooltip  min-width="110">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="copySkipDetail(scope.row)">{{scope.row.applyuser.name}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="procInsName" show-overflow-tooltip  min-width="180"></el-table-column>
                      <el-table-column label="开始时间" prop="startdate" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="结束时间" prop="enddate" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="时长"    prop="longtime" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="出差事由" prop="content" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="出差地址" prop="place" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="驳回原因" prop="" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="审批时间" prop="" show-overflow-tooltip  min-width="180"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="加班">
                      <el-table size="mini"
                      :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="workOvertimeCopyGiveMe" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="applyuser.name" show-overflow-tooltip  min-width="110">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="copySkipDetail(scope.row)">{{scope.row.applyuser.name}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="procInsName" show-overflow-tooltip  min-width="180"></el-table-column>
                      <el-table-column label="开始时间" prop="startdate" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="结束时间" prop="enddate" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="时长" prop="longtime" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="加班事由" prop="content" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="驳回原因" prop="" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="审批时间" prop="" show-overflow-tooltip  min-width="180"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="报销">
                    <el-table size="mini"
                    :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="recoverableCopyGiveMe" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="applyuser.name" show-overflow-tooltip  min-width="110">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="copySkipDetail(scope.row)">{{scope.row.applyuser.name}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="procInsName" show-overflow-tooltip  min-width="180"></el-table-column>
                      <el-table-column label="开始时间" prop="startdate" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="结束时间" prop="enddate" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="报销金额" prop="money" show-overflow-tooltip  min-width="100"></el-table-column>
                      //<el-table-column label="报销凭证" prop="" show-overflow-tooltip  min-width="100"></el-table-column>
                      //<el-table-column label="报销事由" prop="" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="驳回原因" prop="" show-overflow-tooltip  min-width="120"></el-table-column>
                      //<el-table-column label="审批时间" prop="" show-overflow-tooltip  min-width="180"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="离职">
                      <el-table size="mini"
                      :cell-style="cellStyle"
                    :header-cell-style="headerCellStyle" :data="leaveOfficeCopyGiveMe" stripe style="width: 99%" height="360px" max-height="370px">  
                       
                      <el-table-column label="申请用户" prop="applyuser.name" show-overflow-tooltip  min-width="110">
                        <template slot-scope="scope">
                          <el-link  type="primary" :underline="false"   @click="copySkipDetail(scope.row)">{{scope.row.applyuser.name}}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column label="流程名称" prop="procInsName" show-overflow-tooltip  min-width="180"></el-table-column>
                      <el-table-column label="入职日期" prop="incomedate" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="离岗日期" prop="quitdate" show-overflow-tooltip  min-width="120"></el-table-column>
                      <el-table-column label="交接人员" prop="acceptuser.name" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="未处理事宜" prop="undelthings" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="工作交接" prop="handover" show-overflow-tooltip  min-width="110"></el-table-column>
                      <el-table-column label="离职原因" prop="reson" show-overflow-tooltip  min-width="120"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane> -->
            <el-tab-pane label="待办事宜">
              <TodoList></TodoList>
            </el-tab-pane>
            <el-tab-pane label="已办事宜">
              <HistoryList></HistoryList>
            </el-tab-pane>
            <el-tab-pane label="我发起的">
              <ApplyList></ApplyList>
            </el-tab-pane>
            <el-tab-pane label="抄送事项">
              <FlowCopyList></FlowCopyList>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 右边日历 -->
        <div class="right" style="margin-left: 10px; width: 35%">
          <j-date-picker v-model="value1" :width="width1" :placeholder="placeholder" :picker-options="pickerOptions"
            :rangeSeparator="rangeSeparator" @change="onDateChange" :disabled="disabled" :showLunarClass="showLunarClass"
            :showLunarControl="showLunarControl" :type="type" :showBackYears="showBackYears"
            :showLunarIcon="showLunarIcon" :format="format">
          </j-date-picker>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div>
      <!-- 底部标题 -->
      <div class="bottomTitle">
        <el-row :gutter="20">
          <el-col :span="8" style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
            <div>
              <i class="el-icon-message-solid" style="margin-right: 10px"></i>通知公告
            </div>
            <div @click="lookMoreCompany1" style="cursor: pointer">
              查看更多<i class="el-icon-arrow-right" style="margin-right: 10px"></i>
            </div>
          </el-col>
          <el-col :span="8" style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
            <div>
              <i class="el-icon-discount" style="margin-right: 10px"></i>公司制度
            </div>
            <div @click="lookMoreCompany" style="cursor: pointer">
              查看更多<i class="el-icon-arrow-right" style="margin-right: 10px"></i>
            </div>
          </el-col>
          <el-col :span="8" style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            ">
            <div>
              <i class="el-icon-reading" style="margin-right: 10px"></i>学习资料
            </div>
            <div @click="lookMore" style="cursor: pointer">
              查看更多<i class="el-icon-arrow-right" style="margin-right: 10px"></i>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="bottomContent">
        <el-row :gutter="20">
          <el-col :span="8" style="padding-right: 0">
            <div class="studentNotice">
              <ul class="my_ul">
                <li v-for="(item, index) in AnnouncementsList" :key="index"
                  @click="AnnouncementsDetail(item.id, item.isred)">
                  <span class="liLeft">{{ item.noticetitle }}
                    <div :class="item.isread == 1 ? 'reminds' : ''"></div>
                  </span>
                  <span class="liRight">{{ item.remarks }}</span>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8" style="padding-right: 0">
            <div class="studentNotice">
              <ul class="my_ul">
                <li v-for="(item, index) in MeetingNoticesList" :key="index"
                  @click="MeetingNoticesDetail(item.id, item.isred)">
                  <span class="liLeft">{{ item.systemName }}
                    <div :class="item.isread == 1 ? 'reminds' : ''"></div>
                  </span>
                  <span class="liRight">{{ item.remarks }}</span>
                </li>
              </ul>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="studentNotice">
              <ul class="my_ul">
                <li v-for="(item, index) in LearningMaterialsList" :key="index" @click="LearningMaterialsDetail(item.id)">
                  <span class="liLeft">{{ item.datatitle }}
                    <div :class="item.isread == 1 ? 'reminds' : ''"></div>
                  </span>
                  <span class="liRight">{{ item.remarks }}</span>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import TodoList from "../../../components/myAffairs/TodoList.vue";
import HistoryList from "../../../components/myAffairs/HistoryList.vue";
import ApplyList from "../../../components/myAffairs/ApplyList.vue";
import FlowCopyList from "../../../components/myAffairs/FlowCopyList.vue";
import JDatePicker from "../../../components/Calendars/JDatePicker.vue";
import pick from "lodash.pick";
export default {
  inject: ["reload"],
  components: {
    JDatePicker,
    TodoList,
    HistoryList,
    ApplyList,
    FlowCopyList,
  },
  data() {
    return {
      baoxiaoDialog: false,
      companyId: "",
      cellStyle: {
        padding: "0.2rem",
      },
      headerCellStyle: {
        padding: "0.3rem",
      },
      dialogVisible: false,
      pageNo: 1,
      pageSize: 10,
      pageSize1: 10,
      pageSize2: 10,
      pageSize3: 10,
      AnnouncementsList: [],
      MeetingNoticesList: [],
      LearningMaterialsList: [],
      project: [
        //顶部图片
        // { src:require("@/assets/imgs/home/tongxunlu.png"),procDefId:'/hiddenDirectory/addressBookDetail',procDefKey:'addressBookDetail',processName:''},//通讯录跳转页面
        // { src:require("@/assets/imgs/home/qingjia.png")},
        // {
        // 	src: require("@/assets/imgs/home/baoxiao.png"),
        // 	type: '2'
        // }, //项目报销
        {
          src: require("@/assets/imgs/home/chuchai.png"),
          type: "3",
        }, //出差跳转页面
        {
          src: require("@/assets/imgs/home/waichu.jpg"),
          type: "4",
        }, //外出跳转页面
      ],
      middleTopClickNum: "", //中间流程横向点击tab页面选项卡的变量,
      tabPosition: "left", //设置四个流程页面 选项卡位置为左边
      backlog: "", //待办事项选项卡变量
      finishedThings: "", //已办事项选项卡变量
      reject: "", //审批驳回选项卡变量
      copyGiveMe: "", //抄袭给我选项卡变量
      //待办事宜 请假，外出，出差，加班，报销，离职数组
      askForLeaveBacklog: [],
      goOutBacklog: [],
      businessTravelBacklog: [],
      workOvertimeBacklog: [],
      recoverableBacklog: [],
      leaveOfficeBacklog: [],
      //已办事宜 请假，外出，出差，加班，报销，离职数组
      askForLeaveFinished: [],
      goOutFinished: [],
      businessTravelFinished: [],
      workOvertimeFinished: [],
      recoverableFinished: [],
      leaveOfficeFinished: [],
      //审批驳回 请假，外出，出差，加班，报销，离职数组
      askForLeaveReject: [],
      goOutReject: [],
      businessTravelReject: [],
      workOvertimeReject: [],
      recoverableReject: [],
      leaveOfficeReject: [],
      //抄送给我 请假，外出，出差，加班，报销，离职数组
      askForLeaveCopyGiveMe: [],
      goOutCopyGiveMe: [],
      businessTravelCopyGiveMe: [],
      workOvertimeCopyGiveMe: [],
      recoverableCopyGiveMe: [],
      leaveOfficeCopyGiveMe: [],

      sNotice: [
        {
          content: "无人与我立黄昏",
          time: "2018-11-11",
        },
        {
          content: "无人问我粥可温",
          time: "2019-11-11",
        },
        {
          content: "无人陪我书半生",
          time: "2020-11-11",
        },
        {
          content: "无人拭我相思泪",
          time: "2021-04-13",
        },
      ],
      //日历组件字段
      value1: new Date(),
      type: "DATE",
      showLunarClass: "NUMBER",
      showBackYears: 2,
      showLunarIcon: true,
      showLunarControl: true,
      width1: "400",
      format: "YYYY.MM.DD",
      placeholder: "请输入内容",
      rangeSeparator: "-",
      disabled: false,
      editable: true,
      clearable: true,
      pickerOptions: {
        //          disabledDate (time) {
        //            return time.getTime() < Date.now() - 8.64e7;
        //          }
      },
    };
  },
  computed: {
    //用户名
    userName() {
      return JSON.parse(localStorage.getItem("user")).name;
    },
  },
  activated() {
    this.getAnnouncements();
    this.getLearningMaterials();
    this.backlog_LeaveClick();
    this.getMeetingNotices();
  },
  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    '$route'(to, from) {
      this.pageSize = 10;
      this.pageSize1 = 10;
      this.pageSize2 = 10;
      this.pageSize3 = 10;
      // if (to.query.id) {
      // 	this.getAnnouncements();
      // 	this.getLearningMaterials();
      // 	this.getMeetingNotices();
      // }
      // this.backlog_LeaveClick();
    },
  },
  created() {
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem(
        "company",
        JSON.stringify(this.$store.state.user.companyId)
      );
    });
  },
  mounted() {
    this.pageSize = 10;
    this.pageSize1 = 10;
    this.pageSize2 = 10;
  },
  methods: {
    // 学习资料查看更多
    lookMore() {
      this.pageSize1 += 10;
      this.getLearningMaterials();
    },
    lookMoreCompany() {
      this.pageSize2 += 10;
      this.getMeetingNotices()
    },
    lookMoreCompany1(){
      this.pageSize3 += 10;
    },
    //日历组件
    onDateChange(e) {
      console.log("change=>", e, "value:", this.value1);
    },
    //顶部快捷方式
    addressBookRouter(url, name) {
      if (this.$store.state.user.id != "") {
        this.companyId = this.$store.state.user.companyId;
      } else {
        this.companyId = JSON.parse(sessionStorage.getItem("company"));
      }
      this.$router.push({
        path: url,
        name: name,
        query: {
          companyId: this.companyId,
        },
      });
    },
    flowableRouter(type) {
      this.companyId = this.$store.state.user.companyId;
      this.$http({
        url: "/flowable/model/findProcessByCompany",
        method: "get",
        params: {
          companyId: this.companyId,
          type: type,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          // console.log(data)
          var processName = data.model.name;
          var procDefId = data.model.id;
          var procDefKey = data.model.key;
          let tabTitle = "发起流程【" + processName + "】";
          let processTitle =
            `${this.userName} 在 ${this.moment(new Date()).format(
              "YYYY-MM-DD HH:mm"
            )} 发起了 [` +
            processName +
            "]";
          this.$http({
            url: "/flowable/task/getTaskDef",
            method: "get",
            params: {
              procDefId: procDefId,
              status: "start",
            },
          }).then(({ data }) => {
            if (data.success) {
              if (processName == "请假" || processName == "调休") {
                this.dialogVisible = false;
              } //关闭弹出页面
              this.$router.push({
                path: "/flowable/task/TaskForm",
                query: {
                  procDefId: procDefId,
                  id: this.$route.query.id,
                  procDefKey: procDefKey,
                  status: "start",
                  title: tabTitle,
                  formType: data.flow.formType,
                  formUrl: data.flow.formUrl,
                  formTitle: processTitle,
                },
              });
            }
          });
        } else {
          this.dialogVisible = false;
        }
      });
    },
    baoxiaos(type) {
      this.companyId = this.$store.state.user.companyId;
      this.$http({
        url: "/flowable/model/findProcessByCompany",
        method: "get",
        params: {
          companyId: this.companyId,
          type: type,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          // console.log(data)
          var processName = data.model.name;
          var procDefId = data.model.id;
          var procDefKey = data.model.key;
          let tabTitle = "发起流程【" + processName + "】";
          let processTitle =
            `${this.userName} 在 ${this.moment(new Date()).format(
              "YYYY-MM-DD HH:mm"
            )} 发起了 [` +
            processName +
            "]";
          this.$http({
            url: "/flowable/task/getTaskDef",
            method: "get",
            params: {
              procDefId: procDefId,
              status: "start",
            },
          }).then(({ data }) => {
            if (data.success) {
              if (processName == "差旅报销" || processName == "非差旅报销") {
                this.baoxiaoDialog = false;
              } //关闭弹出页面
              this.$router.push({
                path: "/flowable/task/TaskForm",
                query: {
                  procDefId: procDefId,
                  id: this.$route.query.id,
                  procDefKey: procDefKey,
                  status: "start",
                  title: tabTitle,
                  formType: data.flow.formType,
                  formUrl: data.flow.formUrl,
                  formTitle: processTitle,
                },
              });
            }
          });
        } else {
          this.baoxiaoDialog = false;
        }
      });
    },
    //通知公告接口
    getAnnouncements() {
      this.$http({
        url:
          "/dlyrl/hr/companyPortal/findNoticeByOffice?pageNo=" +
          this.pageNo +
          "&pageSize=" +
          this.pageSize3 +
          "&companyId=" +
          this.$route.query.id +
          "&userId=" +
          this.$store.state.user.id,
        method: "get",
      }).then((req) => {
        this.AnnouncementsList = req.data.list;
      });
    },
    AnnouncementsDetail(id, isred) {
      console.log(isred);
      this.$router.push({
        path: "/hiddenDirectory/announcementsDetail",
        name: "announcementsDetail",
        params: {
          //一定要设置name，才可以传params
          id: id,
          remarks: 0,
        },
      });
    },
    //会议通知接口
    getMeetingNotices() {
      this.$http({
        url:
          "/dlyrl/hr/userinformation/findSystemList?pageNo=" +
          this.pageNo +
          "&pageSize=" +
          this.pageSize2 +
          "&companyId=" +
          this.$route.query.id +
          "&userId=" +
          this.$store.state.user.id,
        method: "get",
      }).then((req) => {
        // console.log("会议通知",req.data.list);
        this.MeetingNoticesList = req.data.list;
      });
    },
    MeetingNoticesDetail(id, isred) {
      this.$router.push({
        path: "/hiddenDirectory/meetingNoticesDetail",
        name: "meetingNoticesDetail",
        params: {
          //一定要设置name，才可以传params
          id: id,
          remarks: 0,
        },
      });
    },
    //学习资料接口
    getLearningMaterials() {
      this.$http({
        url:
          "/dlyrl/hr/companyPortal/findMaterial?pageNo=" +
          this.pageNo +
          "&pageSize=" +
          this.pageSize1 +
          "&companyId=" +
          this.$route.query.id +
          "&userId=" +
          this.$store.state.user.id,
        method: "get",
      }).then((req) => {
        this.LearningMaterialsList = req.data.list;
      });
    },
    LearningMaterialsDetail(id) {
      this.reload();
      this.$router.push({
        path: "/hiddenDirectory/learningMaterialsDetail",
        name: "learningMaterialsDetail",
        params: {
          id: id,
          remarks: 0,
        },
      });
    },
    //代办事宜点名字跳转详情
    agencySkipDetail(row) {
      this.$http
        .get("/flowable/task/getTaskDef", {
          params: {
            procInsId: row.task.processInstanceId,
            procDefId: row.task.processDefinitionId,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            this.$router.push({
              path: "/flowable/task/TaskFormDetail",
              query: {
                readOnly: true,
                title: row.vars.title,
                formTitle: row.vars.title,
                ...pick(
                  data.flow,
                  "formType",
                  "formUrl",
                  "procDefKey",
                  "taskDefKey",
                  "procInsId",
                  "procDefId",
                  "taskId",
                  "status",
                  "title",
                  "businessId"
                ),
              },
            });
          }
        });
    },
    //已半事宜点名字跳转详情
    finishedSkipDetail(row) {
      this.$http
        .get("/flowable/task/getTaskDef", {
          params: {
            procInsId: row.processInstanceId,
            procDefId: row.processDefinitionId,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            this.$router.push({
              path: "/flowable/task/TaskFormDetail",
              query: {
                readOnly: true,
                title: row.vars.title,
                formTitle: row.vars.title,
                ...pick(
                  data.flow,
                  "formType",
                  "formUrl",
                  "procDefKey",
                  "taskDefKey",
                  "procInsId",
                  "procDefId",
                  "taskId",
                  "status",
                  "title",
                  "businessId"
                ),
              },
            });
          }
        });
    },
    //审批驳回点名字跳转详情
    returnSkipDetail(row) {
      this.$http
        .get("/flowable/task/getTaskDef", {
          params: {
            procInsId: row.processInstanceId,
            procDefId: row.processDefinitionId,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            // console.log(data,'data')
            // this.$http({
            //   url: `/dlyrl/oa/workover/oaWorkOver/queryById?id=b5aceccefba9431e90a5873cf6354c88`,
            //   method: 'get'
            // }).then(({data}) => {
            //   console.log(data,'d')
            // })
            this.$router.push({
              path: "/flowable/task/TaskFormDetail",
              query: {
                readOnly: true,
                title: row.vars.title,
                formTitle: row.vars.title,
                ...pick(
                  data.flow,
                  "formType",
                  "formUrl",
                  "procDefKey",
                  "taskDefKey",
                  "procInsId",
                  "procDefId",
                  "taskId",
                  "status",
                  "title",
                  "businessId"
                ),
              },
            });
          }
        });
    },
    //抄送给我点名字跳转详情
    copySkipDetail(row) {
      this.$http
        .get("/flowable/task/getTaskDef", {
          params: {
            procInsId: row.procInsId,
            procDefId: row.procDefId,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            this.$router.push({
              path: "/flowable/task/TaskFormDetail",
              query: {
                readOnly: true,
                title: row.procInsName,
                formTitle: row.procInsName,
                ...pick(
                  data.flow,
                  "formType",
                  "formUrl",
                  "procDefKey",
                  "taskDefKey",
                  "procInsId",
                  "procDefId",
                  "taskId",
                  "status",
                  "title",
                  "businessId"
                ),
              },
            });
          }
        });
    },
    //操作审批跳转页面
    adopt(row) {
      this.$http
        .get("/flowable/task/getTaskDef", {
          params: {
            taskId: row.task.id,
            taskName: row.task.name,
            taskDefKey: row.task.taskDefinitionKey,
            procInsId: row.task.processInstanceId,
            procDefId: row.task.processDefinitionId,
            procDefKey: row.task.processDefKey,
            status: row.status,
          },
        })
        .then(({ data }) => {
          if (data.success) {
            this.$router.push({
              path: "/flowable/task/TaskForm",
              query: {
                formTitle: `${row.vars.title}`,
                title: `审批【${row.task.name || ""}】`,
                ...pick(
                  data.flow,
                  "formType",
                  "formReadOnly",
                  "formUrl",
                  "procDefKey",
                  "taskDefKey",
                  "procInsId",
                  "procDefId",
                  "taskId",
                  "status",
                  "title",
                  "businessId"
                ),
              },
            });
          }
        });
    },
    //流程横着点击执行的tab页面
    middleTopHandleClick() {
      switch (this.middleTopClickNum) {
        case "0":
          this.backlog_LeaveClick();
          break;
        case "1":
          this.finished_LeaveClick();
          break;
        case "2":
          this.reject_LeaveClick();
          break;
        case "3":
          this.copyGiveMe_LeaveClick();
          break;
      }
    },
    //待办事宜切换页面
    backlogHandleClick() {
      if (this.backlog == 0) {
        this.backlog_LeaveClick();
      } else if (this.backlog == 1) {
        this.backlog_goOutClick();
      } else if (this.backlog == 2) {
        this.backlog_businessClick();
      } else if (this.backlog == 3) {
        this.backlog_workClick();
      } else if (this.backlog == 4) {
        this.backlog_recoveraClick();
      } else if (this.backlog == 5) {
        this.backlog_leaveOfficeClick();
      }
    },
    //已办事宜切换页面
    finishedHandleClick() {
      if (this.finishedThings == 0) {
        this.finished_LeaveClick();
      } else if (this.finishedThings == 1) {
        this.finished_goOutClick();
      } else if (this.finishedThings == 2) {
        this.finished_businessClick();
      } else if (this.finishedThings == 3) {
        this.finished_workClick();
      } else if (this.finishedThings == 4) {
        this.finished_recoveraClick();
      } else if (this.finishedThings == 5) {
        this.finished_leaveOfficeClick();
      }
    },
    //审批驳回切换页面
    rejectHandleClick() {
      if (this.reject == 0) {
        this.reject_LeaveClick();
      } else if (this.reject == 1) {
        this.reject_goOutClick();
      } else if (this.reject == 2) {
        this.reject_businessClick();
      } else if (this.reject == 3) {
        this.reject_workClick();
      } else if (this.reject == 4) {
        this.reject_recoveraClick();
      } else if (this.reject == 5) {
        this.reject_leaveOfficeClick();
      }
    },
    //抄送给我切换页面
    copyGiveMeHandleClick() {
      if (this.copyGiveMe == 0) {
        this.copyGiveMe_LeaveClick();
      } else if (this.copyGiveMe == 1) {
        this.copyGiveMe_goOutClick();
      } else if (this.copyGiveMe == 2) {
        this.copyGiveMe_businessClick();
      } else if (this.copyGiveMe == 3) {
        this.copyGiveMe_workClick();
      } else if (this.copyGiveMe == 4) {
        this.copyGiveMe_recoveraClick();
      } else if (this.copyGiveMe == 5) {
        this.copyGiveMe_leaveOfficeClick();
      }
    },

    //代办的下面的tab
    backlog_LeaveClick() {
      this.$http({
        url: "/flowable/task/waitList?processName=请假",
        method: "get",
      }).then((req) => {
        this.askForLeaveBacklog = req.data.page.list;
      });
    },
    backlog_goOutClick() {
      this.$http({
        url: "/flowable/task/waitList?processName=外出",
        method: "get",
      }).then((req) => {
        this.goOutBacklog = req.data.page.list;
      });
    },
    backlog_businessClick() {
      this.$http({
        url: "/flowable/task/waitList?processName=出差",
        method: "get",
      }).then((req) => {
        this.businessTravelBacklog = req.data.page.list;
      });
    },
    backlog_workClick() {
      this.$http({
        url: "/flowable/task/waitList?processName=加班",
        method: "get",
      }).then((req) => {
        this.workOvertimeBacklog = req.data.page.list;
      });
    },
    backlog_recoveraClick() {
      this.$http({
        url: "/flowable/task/waitList?processName=报销",
        method: "get",
      }).then((req) => {
        this.recoverableBacklog = req.data.page.list;
      });
    },
    backlog_leaveOfficeClick() {
      this.$http({
        url: "/flowable/task/waitList?processName=离职",
        method: "get",
      }).then((req) => {
        this.leaveOfficeBacklog = req.data.page.list;
      });
    },
    //已办的下面的tab
    finished_LeaveClick() {
      this.$http({
        url: "/flowable/task/alreadyListData?processName=请假",
        method: "get",
      }).then((req) => {
        this.askForLeaveFinished = req.data.page.list;
      });
    },
    finished_goOutClick() {
      this.$http({
        url: "/flowable/task/alreadyListData?processName=外出",
        method: "get",
      }).then((req) => {
        this.goOutFinished = req.data.page.list;
      });
    },
    finished_businessClick() {
      this.$http({
        url: "/flowable/task/alreadyListData?processName=出差",
        method: "get",
      }).then((req) => {
        this.businessTravelFinished = req.data.page.list;
      });
    },
    finished_workClick() {
      this.$http({
        url: "/flowable/task/alreadyListData?processName=加班",
        method: "get",
      }).then((req) => {
        this.workOvertimeFinished = req.data.page.list;
      });
    },
    finished_recoveraClick() {
      this.$http({
        url: "/flowable/task/alreadyListData?processName=报销",
        method: "get",
      }).then((req) => {
        this.recoverableFinished = req.data.page.list;
      });
    },
    finished_leaveOfficeClick() {
      this.$http({
        url: "/flowable/task/alreadyListData?processName=离职",
        method: "get",
      }).then((req) => {
        this.leaveOfficeFinished = req.data.page.list;
      });
    },
    //审批退回的下面的tab
    reject_LeaveClick() {
      this.$http({
        url: "/flowable/task/myApplyedRefund?processName=请假",
        method: "get",
      }).then((req) => {
        this.askForLeaveReject = req.data.page.list;
      });
    },
    reject_goOutClick() {
      this.$http({
        url: "/flowable/task/myApplyedRefund?processName=外出",
        method: "get",
      }).then((req) => {
        this.goOutReject = req.data.page.list;
      });
    },
    reject_businessClick() {
      this.$http({
        url: "/flowable/task/myApplyedRefund?processName=出差",
        method: "get",
      }).then((req) => {
        this.businessTravelReject = req.data.page.list;
      });
    },
    reject_workClick() {
      this.$http({
        url: "/flowable/task/myApplyedRefund?processName=加班",
        method: "get",
      }).then((req) => {
        this.workOvertimeReject = req.data.page.list;
      });
    },
    reject_recoveraClick() {
      this.$http({
        url: "/flowable/task/myApplyedRefund?processName=报销",
        method: "get",
      }).then((req) => {
        this.recoverableReject = req.data.page.list;
      });
    },
    reject_leaveOfficeClick() {
      this.$http({
        url: "/flowable/task/myApplyedRefund?processName=离职",
        method: "get",
      }).then((req) => {
        this.leaveOfficeReject = req.data.page.list;
      });
    },
    //抄送给我的下面的tab
    copyGiveMe_LeaveClick() {
      this.$http({
        url: "/oa/processinfo/findOaLeave?procInsName=请假",
        method: "get",
      }).then((req) => {
        this.askForLeaveCopyGiveMe = req.data.oaLeave;
      });
    },
    copyGiveMe_goOutClick() {
      this.$http({
        url: "/oa/processinfo/findGoOut?procInsName=外出",
        method: "get",
      }).then((req) => {
        this.goOutCopyGiveMe = req.data.oaGoOut;
      });
    },
    copyGiveMe_businessClick() {
      this.$http({
        url: "/oa/processinfo/findBussinessTravel?procInsName=出差",
        method: "get",
      }).then((req) => {
        this.businessTravelCopyGiveMe = req.data.oaBussinessTravel;
      });
    },
    copyGiveMe_workClick() {
      this.$http({
        url: "/oa/processinfo/findWorkOver?procInsName=加班",
        method: "get",
      }).then((req) => {
        this.workOvertimeCopyGiveMe = req.data.oaWorkOver;
      });
    },
    copyGiveMe_recoveraClick() {
      this.$http({
        url: "/oa/processinfo/findBussinessReimburse?procInsName=报销",
        method: "get",
      }).then((req) => {
        console.log(req, "r");
        this.recoverableCopyGiveMe = req.data.oaProjectReimbursement;
      });
    },
    copyGiveMe_leaveOfficeClick() {
      this.$http({
        url: "/oa/processinfo/findApplyQuit?procInsName=离职",
        method: "get",
      }).then((req) => {
        this.leaveOfficeCopyGiveMe = req.data.applyQuit;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.reminds {
  margin: 3.5px 0 0 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: red;
}

#body {
  width: 100%;
}

//所有标题
.topTitle,
.middleTitle,
.bottomTitle {
  font-size: 15px;
  font-weight: 600;
  color: rgb(16, 129, 163);
  margin-left: 5px;
  margin-bottom: 10px;
}

.middleTitle,
.bottomTitle {
  margin-top: 10px;
}

//顶部内容
.topContent {
  display: flex;
  width: 100%;
  padding: 5px;
  background: #fff;
  margin-bottom: 5px;
  box-sizing: border-box;
}

.topImg {
  width: 100%;
}

.singleImg {
  width: 20%;
  margin: 5px 0;
  padding: 0 10px;
}

//中间内容(左边流程)
.left {
  width: 100%;
  padding: 5px;
  background: #fff;
  margin-bottom: 5px;
  box-sizing: border-box;
}

//中间内容(右边日历)
.right {
  width: 100%;
  padding-top: 20px;
  background: #fff;
  margin-bottom: 5px;
  height: 430px;
  text-align: center;
}

//通知公告,会议通知，学习资料
.studentNotice {
  padding: 3px 15px;
  background: #fff;
  margin-bottom: 5px;
  height: 500px;
  overflow-y: auto;
}

.my_ul {
  margin-top: 15px;
}

.my_ul>li {
  list-style: none;
  width: 100%;
  height: 20px;
  display: float;
  flex-direction: row;
  margin: 10px 0px;
  cursor: pointer;
  font-size: 13px;
  color: #393939;
}

.my_ul>li>.liLeft {
  display: flex;
  float: left;
}

.my_ul>li>.liRight {
  float: right;
}
</style>
